﻿<UserControl x:Class="Stopwatch.Controls.TimerControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:local="clr-namespace:Stopwatch.Controls"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="400" d:DesignWidth="420">

    <UserControl.Resources>
        <Style x:Key="LoopingSelectorStyle" TargetType="primitives:LoopingSelector">
            <Setter Property="Width" Value="138"/>
        </Style>
        <Style x:Key="TagLabelStyle" TargetType="TextBlock">
            <Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>
            <Setter Property="Margin" Value="12,111,0,0"/>
            <Setter Property="Height" Value="27"/>
            <Setter Property="Width" Value="60"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
        </Style>
        <Style x:Key="SubText" TargetType="TextBlock">
            <Setter Property="FontSize" Value="92"/>
            <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
    </UserControl.Resources>

    <Grid d:IsLocked="True">
        <Grid x:Name="PickerPanel">
            <Grid.Resources>
                <DataTemplate x:Key="NumberTemplate">
                    <Grid>
                        <TextBlock Text="{Binding}" FontSize="92" 
                                   FontFamily="{StaticResource PhoneFontFamilySemiBold}" 
                                   HorizontalAlignment="Center" 
                                   VerticalAlignment="Center" />
                    </Grid>
                </DataTemplate>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <TextBlock x:Name="hoursTag" Text="hrs." Style="{StaticResource TagLabelStyle}" Grid.Column="0"/>
            <primitives:LoopingSelector x:Name="HoursLoopingSelector" Grid.Column="0"  
                                        ItemSize="138,138" 
                                        ItemMargin="6" 
                                        ItemTemplate="{StaticResource NumberTemplate}" 
                                        Style="{StaticResource LoopingSelectorStyle}">
                <primitives:LoopingSelector.DataSource>
                    <local:NumbersDataSource />
                </primitives:LoopingSelector.DataSource>
            </primitives:LoopingSelector>

            <TextBlock x:Name="minutesTag" Text="mins." Grid.Column="1" Style="{StaticResource TagLabelStyle}"/>
            <primitives:LoopingSelector x:Name="MinutesLoopingSelector" Grid.Column="1" 
                                        ItemMargin="6" 
                                        ItemSize="138,138" 
                                        ItemTemplate="{StaticResource NumberTemplate}" 
                                        Style="{StaticResource LoopingSelectorStyle}">
                <primitives:LoopingSelector.DataSource>
                    <local:NumbersDataSource Maximum="59" />
                </primitives:LoopingSelector.DataSource>
            </primitives:LoopingSelector>

            <TextBlock x:Name="secondsTag" Text="secs." Grid.Column="2" Style="{StaticResource TagLabelStyle}"/>
            <primitives:LoopingSelector x:Name="SecondsLoopingSelector" Grid.Column="2" 
                                        ItemMargin="6" 
                                        ItemSize="138,138" 
                                        ItemTemplate="{StaticResource NumberTemplate}" 
                                        Style="{StaticResource LoopingSelectorStyle}">
                <primitives:LoopingSelector.DataSource>
                    <local:NumbersDataSource Maximum="59" />
                </primitives:LoopingSelector.DataSource>
            </primitives:LoopingSelector>
        </Grid>
        <Grid x:Name="ShowPanel" Visibility="Collapsed">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="25"/>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition Width="45"/>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition Width="45"/>
                <ColumnDefinition Width="100"/>
            </Grid.ColumnDefinitions>

            <TextBlock x:Name="hours" Text="00"  Grid.Column="1" 
                       Style="{StaticResource SubText}"
                       HorizontalAlignment="Left" />

            <TextBlock Text=":" Margin="0,0,0,15" Grid.Column="2"  
                       Style="{StaticResource SubText}"
                       HorizontalAlignment="Center"/>

            <TextBlock x:Name="minutes" Text="00" Grid.Column="3"  
                       Style="{StaticResource SubText}"
                       HorizontalAlignment="Left"/>

            <TextBlock Text=":" Margin="0,0,0,15" Grid.Column="4"  
                       Style="{StaticResource SubText}"
                       HorizontalAlignment="Center"/>

            <TextBlock x:Name="seconds" Text="00" Grid.Column="5"  
                       Style="{StaticResource SubText}"
                       HorizontalAlignment="Left"/>
        </Grid>
    </Grid>
</UserControl>
